<template>
  <h2>管理收货地址</h2>
  <div style="text-align: right; padding: 0 30px">
    <el-button @click="()=>{this.dialogFormVisible = true}" type="success" round ><el-icon><plus /></el-icon>新增</el-button>
  </div>
  <br>
  <el-table :data="AddressList" style="width: 100%">
    <el-table-column label="地区" width="300">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon><location /></el-icon>
          <span style="margin-left: 10px">{{ CodeToText[scope.row.province] }} / {{ CodeToText[scope.row.city] }} / {{ CodeToText[scope.row.area] }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="详细地址" width="450">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.addressDetail }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="手机号码" width="200">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <span style="margin-left: 10px">{{ scope.row.phoneNum }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-popover effect="light" trigger="hover" placement="left">
          <template #default>
            <div>编辑</div>
          </template>
          <template #reference>
            <el-button @click="editAddress(scope.row.id, scope.row.phoneNum, scope.row.province, scope.row.city, scope.row.area, scope.row.addressDetail)" type="primary" size="small" circle ><el-icon><edit /></el-icon></el-button>
          </template>
        </el-popover>
        <el-popover effect="light" trigger="hover" placement="right">
          <template #default>
            <div>删除</div>
          </template>
          <template #reference>
            <el-button @click="delAddress(scope.row.id)" type="danger" size="small" circle ><el-icon><delete /></el-icon></el-button>
          </template>
        </el-popover>
      </template>
    </el-table-column>
  </el-table>
  <AddAddress :dialog-form-visible=dialogFormVisible :addressData="addressData" @closeDialog="closeDialog"></AddAddress>
</template>

<script>
import AddAddress from '@/components/dialog/AddAddress';
import request from "@/http/request";
const {CodeToText} = require("element-china-area-data/dist/app");

export default {
  name: "UserAddress",
  components: {
    AddAddress,
  },
  watch: {
    dialogFormVisible: function (newVal){
      if (newVal === false) {
        this.getAddressList();
      }
    }
  },
  data() {
    return {
      AddressList: [],
      dialogFormVisible: false,
      addressData: {},
    };
  },
  methods: {
    getAddressList() {
      request({
        url: "/user/getAddressInfo",
        method: "get",
      }).then((response) => {
        if (response.code === 200) {
          // this.$tipUtil.successTip(response.msg);
          this.AddressList = response.data;
        } else {
          this.$tipUtil.errTip(response.msg);
        }
      })
    },
    editAddress(id, phoneNum, province, city, area, addressDetail) {
      this.addressData = {
        id: id,
        phoneNum: phoneNum,
        addArray: [province, city, area],
        addressDetail: addressDetail,
      };
      this.dialogFormVisible = true;
    },
    delAddress(addressId) {
      request({
        url: "/user/delAddressInfo",
        method: "post",
        data: {
          addressId: addressId,
        }
      }).then((response) => {
        if (response.code === 200) {
          this.$tipUtil.successTip(response.msg);
          this.AddressList.map((item)=>{
            if (item.id === addressId) {
              this.AddressList.splice(this.AddressList.indexOf(item), 1);
            }
          })
        } else {
          this.$tipUtil.errTip(response.msg);
        }
      })
    },
    closeDialog() {
      this.dialogFormVisible = false;
      this.addressData = {};
    },
  },
  setup() {
    return {
      CodeToText,
    }
  },
  mounted() {
    this.getAddressList();
  }
}
</script>

<style scoped>

</style>